<template>
	<div>
		<!-- 头部 -->
		<div class="header">
			<el-row style="padding: 5px 0 0 0;">
				<el-col :span="4">
					视频名称:
					<el-input v-model="aName" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="4">
					视频编号:
					<el-input v-model="aId" placeholder="请输入内容" style="width: 200px;"></el-input>
				</el-col>
				<el-col :span="6">
					<div class="block">
						<span class="demonstration">创建时间:</span>
						<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
							end-placeholder="结束日期" value-format="yyyy-MM-dd">
						</el-date-picker>
					</div>
				</el-col>
				<el-col :span="2">
					<el-button size="mini" @click="selectLike"
						style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
						查询结果</el-button>
				</el-col>
				<el-col :span="2">
					<!-- <el-button type="primary" >加载中</el-button> -->
					<el-button type="primary" @click="goToExternalUrl" icon="el-icon-circle-plus-outline"
						:loading="isno" plain>获取素材</el-button>
				</el-col>
			</el-row>

		</div>
		<el-row v-if="selectedRows.length > 0">
			<el-col :span="6">
				人群标签:
				<el-select v-model="tagId">
					<el-option v-for="(item,index) in tags" v-bind:key="index" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="6">
				<el-button @click="update()">修改人群标签</el-button>
			</el-col>
		</el-row>
		<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{ textAlign: 'center' }"
			:data="advertisersList.records" stripe style="width: 100% width: 80%;margin: auto"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column property="materialId" label="素材id">
			</el-table-column>
			<el-table-column property="filename" label="名称">
			</el-table-column>
			<el-table-column property="createTime" label="上传时间">
			</el-table-column>
			<el-table-column label="视频" width="300">
				<div slot-scope="scope">
					<template>
						<template>
							<el-popover placement="bottom-start" width="320" trigger="click"
								:visible.sync="popoverVisible">
								<img slot="reference" :src="scope.row.videoPoster" style="width: 150px; height: 250px;">
								<video :src="scope.row.videoUrl"
									style="width: 300px; height: auto; background-color: #fff;" controls></video>
							</el-popover>
						</template>
					</template>
				</div>
			</el-table-column>
			<el-table-column label="视频标签 ">
				<div slot-scope="scope">
					<el-tag type="danger" v-if="scope.row.inefficient==true">低效</el-tag>
					<el-tag type="danger" v-if="scope.row.first==true">首发</el-tag>
					<el-tag type="danger" v-if="scope.row.adHigh==true">AD优质</el-tag>
				</div>
			</el-table-column>
			<el-table-column property="sort" label="使用次数">
			</el-table-column>
			<el-table-column label="过审率">
				<template slot-scope="scope">
					<el-popover placement="right" width="400" trigger="click">
						<template>
							<span v-for="(item,index) in getnum" :key="index" slot="reference">
								<el-progress v-if="scope.row.id === item.materialId" type="dashboard"
									:percentage="((item.number/scope.row.sort)*100).toFixed(2)"
									:color="((item.number/scope.row.sort)*100)<=20?'#ff0000':((item.number/scope.row.sort)*100)<=40?'#e6a23c':((item.number/scope.row.sort)*100)<=60?'#5cb87a':((item.number/scope.row.sort)*100)<=80?'#1989fa':'#6f7ad3'"
									width="100"></el-progress>
							</span>
						</template>
						<el-table :data="amsAdvertising">
							<el-table-column width="80" property="abbreviation" label="资质名称"></el-table-column>
							<el-table-column width="80" property="consumesum" label="消耗"></el-table-column>
							<el-table-column width="80" property="conversionsum" label="转化"></el-table-column>
							<el-table-column width="80" property="averageavg" label="平均转化"></el-table-column>
							<el-table-column width="80" property="nums" label="使用次数"></el-table-column>
							<el-table-column width="80" label="过审率">
								<template slot-scope="scope">
									<span>{{((scope.row.number/scope.row.nums)*100).toFixed(2)}}%</span>
								</template>
							</el-table-column>
						</el-table>
						<el-button slot="reference" @click="getList(scope.row.id)">查看详情</el-button>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column label="消耗" sortable>
				<template slot-scope="scope">
					<template v-for="item in getnum">
						<span :key="item.materialId" v-if="scope.row.id === item.materialId" slot="reference">
							{{item.consumesum}}
						</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="转化">
				<template slot-scope="scope">
					<template v-for="item in getnum">
						<span :key="item.materialId" v-if="scope.row.id === item.materialId" slot="reference">
							{{item.conversionsum}}
						</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="平均">
				<template slot-scope="scope">
					<template v-for="item in getnum">
						<span :key="item.materialId" v-if="scope.row.id === item.materialId" slot="reference">
							{{item.averageavg}}
						</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="标签">
				<template slot-scope="scope">
					<el-select v-model="scope.row.tagId" @change="handleTagChange(scope.row)">
						<el-option v-for="(item,index) in tags" v-bind:key="index" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<el-row slot-scope="scope">
					<el-col span="6"><el-button type="text" size="mini"
							@click=" viewAccount(scope.row.id)">查看账号</el-button></el-col>
					<el-col span="18"><el-button type="text" size="mini"
							@click="deletes(scope.row.id)">删除</el-button></el-col>
				</el-row>
			</el-table-column>
		</el-table>
		<div>
			<el-row style="margin: 20px 0;">
				<el-col :span="11">
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="1" :page-sizes="[10,20, 50, 100]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="advertisersList.total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>

	</div>
</template>

<script>
	import '@/assets/css/index.css'
	import qs from 'qs'
	export default {
		name: "qusd",
		data() {
			return {
				tagId: '',
				tags: [],
				popoverVisible: false,
				isno: false,
				value1: '',
				advertisersList: [],
				resourceCategory: [],
				aName: '',
				aId: '',
				role: '',
				categoryIds: '',
				dialogVisible: false,
				description: '',
				title: '',
				resource: [],
				videoUrl: '',
				roleDescriptions: {},
				size: 10,
				current: 1,
				amsAdvertising: [],
				getnum: [],
				selectedRows: []
			}
		},
		created() {
			this.list()
		},
		methods: {
			handleSelectionChange(val) {
				this.selectedRows = val;
				console.log(this.selectedRows)
			},
			getList(id) {
				let than = this;
				this.$axios.post('amsAdvertising/getList', qs.stringify({
					id: id
				})).then((res) => {
					than.amsAdvertising = res.data;
					console.log(than.amsAdvertising)
				})
			},

			list() {
				let than = this
				this.$axios.post('tags/list').then((res) => {
					than.tags = res.data;
					console.log("tage:" + than.tags)
				})
				this.$axios.post('mmsMaterial/getlist', qs.stringify({
					size: 10,
					current: than.current
				})).then((res) => {
					than.advertisersList = res.data;
					console.log(than.advertisersList)
				})
				this.$axios.post('amsAdvertising/getnum').then((res) => {
					than.getnum = res.data;
					console.log(than.getnum)
				})
			},
			updateByQuality(id, quality) {
				let than = this;
				// alert(id)
				this.$axios.post('mmsMaterial/updateByQuality', qs.stringify({
					id: id,
					quality: quality
				}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				}).then((res) => {
					than.size = than.advertisersList.size
					than.current = than.advertisersList.current
					this.list()
					console.log(res)
				});
			},
			update() {
				let than=this;
				this.selectedRows.forEach((data) => {
							this.$axios.post('mmsMaterial/updateTag', qs.stringify({
								id: data.id,
								tagId: than.tagId
							})).then((res) => {
								than.list()
								console.log(res.data)
							})
						})
					},
					viewAccount(id) {
						this.$router.push({
							name: 'advertisingUser',
							params: {
								accountId: id
							}
						});
					},
					closePopover() {
						this.popoverVisible = false;
					},
					handleTagChange(row) {

						this.$axios.post('mmsMaterial/updateTag', qs.stringify({
							id: row.id,
							tagId: row.tagId
						})).then((res) => {
							// loadingInstance.close();
							if (res.data) {
								this.$message({
									message: '修改成功',
									type: 'success'
								});
							}

						})
					},
					handleSizeChange(val) {
						let that = this
						this.$axios.post('mmsMaterial/getlist', qs.stringify({
							size: val,
							current: 1,
							name: that.aName,
							id: that.aId
						})).then((res) => {
							that.advertisersList = res.data;
							console.log(that.advertisersList)
						})
					},
					handleCurrentChange(val) {
						let that = this;
						this.$axios.post('mmsMaterial/getlist', qs.stringify({
							size: that.advertisersList.size,
							current: val,
							name: that.aName,
							id: that.aId
						})).then((res) => {
							that.advertisersList = res.data;
						})
					},
					goToExternalUrl() {
						this.isno = true
						this.$axios.post('mmsMaterial/list').then((res) => {
							console.log(res)
							this.$message({
								message: '添加成功',
								type: 'success'
							});
							this.list();
							this.isno = false
						}).catch((error) => {
							console.error(error);
							this.isno = false; // 请求失败时也要隐藏加载图标  
							
						});
					},
					selectLike() {
						let that = this
						alert(this.value1)
						let startCreateTime=this.value1[0]
						let endCreateTime=this.value1[1]
						this.$axios.post('mmsMaterial/getlist', qs.stringify({
							size: 10,
							current: 1,
							filename: that.aName,
							id: that.aId,
							startCreateTime: startCreateTime,
							endCreateTime: endCreateTime
						})).then((res) => {
							that.advertisersList = res.data;
							console.log(that.advertisersList)
						})
					},
			}
		}
</script>

<style>
	.header {
		width: auto;
		height: 50px;
		border: 1px solid #ddd;
		margin: 15px auto;
		border-radius: 3px 3px;
		position: relative;
	}

	video {
		box-shadow: none;
		outline: none;
	}
</style>